---
import BaseLayout from "./Base.astro";
import { getLocaleTime, getPreviousAndNextPosts, sortMDByDate } from "src/util";
import Paginator from "@/components/Paginator";
import type { Post } from "@/types";

const {
	content: { title, description, publishDate, tags },
	headings,
} = Astro.props;
const date = new Date(publishDate);
const datetime = date.toISOString();
const postDate = getLocaleTime(date);
const currentPage = new URL(Astro.request.url).pathname;
const allPosts = await Astro.glob<Post>("../pages/posts/*.mdx");
const allSortedPosts = sortMDByDate(allPosts);
const { prev, next } = getPreviousAndNextPosts(currentPage, allSortedPosts);
const paginationProps = {
	...(prev && {
		prevUrl: {
			url: prev.url,
			text: `← ${prev.frontmatter.title}`,
			srLabel: " Previous Article:",
		},
	}),
	...(next && {
		nextUrl: {
			url: next.url,
			text: `${next.frontmatter.title} →`,
			srLabel: "Next Article:",
		},
	}),
};
---

<BaseLayout meta={{ title, description }}>
	<div class="sm:grid sm:grid-cols-[3fr_1fr] sm:gap-x-10 sm:items-start">
		<article>
			<h1 class="title">{title}</h1>
			<span
				class="flex flex-col sm:gap-y-2 md:flex-row md:items-center md:gap-y-0 md:divide-x md:divide-textColor"
			>
				<time {datetime} class="pr-2">{postDate}</time>
				{
					tags?.length && (
						<div class="flex items-center md:pl-2">
							<svg
								aria-hidden="true"
								xmlns="http://www.w3.org/2000/svg"
								class="w-6 h-6"
								viewBox="0 0 24 24"
								stroke-width="1.5"
								stroke="currentColor"
								fill="none"
								stroke-linecap="round"
								stroke-linejoin="round"
							>
								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
								<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
								<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
								<path d="M6 9h-.01" />
							</svg>
							<ul class="flex items-center ml-1 gap-x-2">
								{tags.map((tag) => (
									<li>
										<a
											class="inline-block cactus-link"
											aria-label={`View more blogs with the tag ${tag}`}
											href={`/tags/${tag}`}
										>
											&#35;{tag}
										</a>
									</li>
								))}
							</ul>
						</div>
					)
				}
			</span>
			<p class="mt-8">{description}</p>
			<div
				class="mt-12 prose prose-sm prose-cactus prose-headings:font-semibold prose-headings:before:content-['#'] prose-headings:before:text-accent prose-headings:before:absolute prose-headings:before:-ml-4 prose-th:before:content-none"
			>
				<slot />
			</div>
		</article>
		<aside
			class="invisible hidden text-right sm:sticky sm:top-20 sm:block sm:visible"
		>
			<h2 class="font-semibold">Table of Contents</h2>
			<ul class="mt-4 text-xs space-y-2">
				{
					headings.map(({ slug, text }) => (
						<li class="line-clamp-2 hover:text-accent">
							<a href={`#${slug}`} aria-label={`Scroll to section: ${text}`}>
								<span>&#35;</span> {text}
							</a>
						</li>
					))
				}
			</ul>
		</aside>
	</div>
	<div class="mt-24">
		<Paginator {...paginationProps} />
	</div>
</BaseLayout>

<style>
	/* Hide the weird code block adding the language */
	:global(article pre .language-id) {
		@apply hidden;
	}
</style>
